<script>
export default {
  name: 'map-satellite',
  props: {
    modelValue: { type: Boolean, default: false },
    mapGetter: { type: Function, default: undefined },
    theme: { type: String, default: 'dark' },
  },
  emits: ['update:modelValue'],
  created() {
    if (typeof this.mapGetter === 'function') {
      this.map = this.mapGetter();
    }
    this.satelliteLayer = new AMap.TileLayer.Satellite();
    this.$watch(
      () => this.modelValue,
      (val) => {
        if (!this.map) return;
        val ? this.map.add(this.satelliteLayer) : this.map.remove(this.satelliteLayer);
      },
      { immediate: true },
    );
  },
};
</script>

<template>
  <div
    class="map-satellite"
    :class="`map-satellite-${theme}`"
    style="display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center"
  >
    <span class="map-satellite-btn" :class="{ active: !modelValue }" @click="$emit('update:modelValue', false)">
      平面地图
    </span>
    <span class="map-satellite-btn" :class="{ active: !!modelValue }" @click="$emit('update:modelValue', true)">
      卫星地图
    </span>
  </div>
</template>

<style lang="less">
.map-satellite {
  border-radius: 4px;
  .map-satellite-btn {
    padding: 8px 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
  }
  &.map-satellite-white {
    border: 1px solid #c9c9c9;
    background: #ffffff;
    .map-satellite-btn {
      color: #333333;
      &:not(:first-child) {
        border-left: 1px solid #c9c9c9;
      }
      &.active {
        color: #1890ff;
      }
    }
  }
  &.map-satellite-dark {
    border: 1px solid #3275a9;
    background: rgba(0, 0, 0, 0.6);
    .map-satellite-btn {
      color: #f0f0f0;
      &:not(:first-child) {
        border-left: 1px solid #3275a9;
      }
      &.active {
        color: #3275a9;
      }
    }
  }
}
</style>
